<template>
    <div>
        <section>
            <h3 class='mdl-title'>热门推荐</h3>
            <ul class='mdl-content'>
                <router-link 
                    tag="li"
                    class='item border-bottom' 
                    v-for='item in list' 
                    :key="item.id"
                    :to="'/detail/' + item.id"
                >
                    <img :src="item.imgUrl" alt="" class='item-img'>
                    <div class='item-info'>
                        <p class="item-title">{{item.title}}</p>
                        <p class='item-desc'>{{item.desc}}</p>
                        <p>
                            <button type='button' class='item-do'>查看详情</button>
                        </p>
                    </div>
                </router-link>
            </ul>
        </section>
    </div>
</template>
<script>
export default {
    name:"HomeRecommend",
    props:{
       list:Array
    }
}
</script>
<style lang="scss" scoped>
@import "~styles/_parameters.scss";
@import "~styles/mixins.scss";
    .mdl-title{
        background-color:$bgNormal;
        padding:.25rem;
        text-align:left;
    }
    .item{
       display:flex;
    }
    .item-img{
        width:1.7rem;
        height:1.7rem;
        padding:.1rem;
    }
    .item-info{
        text-align:left;
        padding-right:.1rem;
        min-width:0;
        flex:1;
    }
    .item-title{
        @extend %ellipsis;
        font-size:.32rem;
        line-height:.54rem;
    }
    .item-desc{
        color:$textLightColor;
        line-height:.4rem;
        font-size:small;
    }
    .item-do{
        background-color:#ff9300;
        line-height:.44rem;
        color:#eee;
        padding:0 .18rem;
        border-radius:0.1rem;
        margin-top:.16rem;
       
    }
</style>
